<template>
  <div id="app" v-loading="isLoading">
    <router-view/>
    <el-dialog 
    style="border-radius: 25px;"
    :visible.sync="showLogin"
    :close-on-click-modal="false"
    width="35%"
    :show-close="false">
    	<div class="loginForm">
			<el-row>
				<el-col class="logoTip">
					当前账户认证已失效，请重新验证
				</el-col>
				<el-col :span="16" :offset="4">
					<el-input placeholder="账户" v-model="curUser.userName" disabled>
						<template slot="prepend"><i class="iconfont icon-account"></i>&nbsp;账户</template>
					</el-input>
				</el-col>
				<el-col :span="16" :offset="4">
					<el-input placeholder="密码" v-model="userPwd" type="password">
						<template slot="prepend"><i class="iconfont icon-mima"></i>&nbsp;密码</template>
					</el-input>
				</el-col>
				<el-col :span="16" :offset="4">
					<el-button type="primary" round style="width:40%" @click="loginCheck">确认</el-button>
					<el-button type="danger" round style="width:40%" @click="backLogin">退出</el-button>
				</el-col>
			</el-row>
		</div>
	</el-dialog>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
		return {
				userPwd:'',
				curUser:{
					userName:''
				}
			}
		},
	computed:{
		showLogin(){
			return this.$store.state.showLogin;
		},
		isLoading(){
			return this.$store.state.isLoading;
		}
	},
	mounted(){
		if (this.$cookies.get("curUser")) {
			this.curUser = this.$cookies.get("curUser");
		}
	},
	methods:{
		loginCheck:function(){
			var vm =this;
			this.$axios.loginCheck(vm.curUser.userName,vm.userPwd).then(function(res){
				vm.userPwd = '';
				if (res.data.code == 200 || res.data.code == "200") {
					vm.$cookies.set('token',res.headers.token,3600);
					vm.$store.commit({
					          type:"setShowLogin",
					          showLogin:false
					        });
					vm.$store.commit({
				          type:"setIsLoading",
				          isLoading:false
				        });
				}else{
					vm.$notify({
			          title: '登录错误',
			          message: res.data.msg,
			          type: 'error'
			        });
				}
			},function(res){
				vm.userPwd = '';
				console.log("error:"+res)
			});
		},
		backLogin:function(){
			this.userPwd = '';
			this.$store.commit({
					          type:"setShowLogin",
					          showLogin:false
					        });
			this.$cookies.remove("token");
			this.$cookies.remove("curUser");
			this.$router.push({path:'/login'});
		}
	}
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.loginForm{
	width: 100%;
	height: auto;
}
.loginForm .el-col{
	margin-bottom: 15px;
	margin-top: 10px;
}
.logoTip{
	color: orange;
	text-align: center;
	font-size: 14pt;
}
/*子组件内公用样式*/
.triage .el-input__inner{
		border-bottom: 1px solid #000000;
		border-top: none;
		border-right: none;
		border-left: none;
		border-radius: 0px;
		height: 30px;
		padding-right: 5px!important;
		padding-left: 5px!important;
		color: #00008b;
		font-size: 12pt;
		font-weight: bolder;
	}
	.wait .el-input__inner{
		border-bottom: 1px solid #1e90ff;
		border-top: none;
		border-right: none;
		border-left: none;
		border-radius: 0px;
		height: 30px;
		padding-right: 5px;
		padding-left: 5px;
		background-color: #1e90ff;
		color: #ffa500;
	}
	.userSearch .el-scrollbar{
		width: 200px;
	}
	.manual .el-checkbox__input.is-disabled+span.el-checkbox__label{
    color: #409EFF;
    cursor: pointer;
  }
  .visit .el-checkbox__input{
    vertical-align: top;
    line-height: 50px;
  }
  .searchInput .el-input__inner{
    width: 600px;
  }
  .danger .el-input__inner{
		color: #ff0000!important;
	}
.recipe .el-input__inner{
		border-top: none;
		border-right: none;
		border-left: none;
		border-bottom: 1px solid #444444;
		border-radius: 0px;
		height: 30px;
		padding-right: 5px!important;
		padding-left: 5px!important;
		font-size: 12pt;
		font-family: "宋体";
	}
	.el-scrollbar{
		width: 400px;
	}
	.el-time-spinner .el-scrollbar{
		width: 90px!important;
	}
	.bedNumber .el-menu--horizontal>.el-submenu .el-submenu__title{
		height: 35px!important;
		line-height: 35px!important;
	}
	.bedNumber .el-submenu__title{
		padding:0px 0px!important; 
	}
	.bedNumber .el-dropdown-menu__item--divided:before, .el-menu, .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
		background-color: transparent;
	}
	.bedNumber .el-menu--horizontal{
		border-bottom: none;
	}
	.bedNumber .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
		border-bottom: none;
	}
	.bedNumber .el-submenu.is-active .el-submenu__title{
		border-bottom: none;
	}
	.emergency .el-input__inner{
		border-bottom: 1px solid #000000;
		border-top: none;
		border-right: none;
		border-left: none;
		border-radius: 0px;
		padding-right: 5px!important;
		padding-left: 5px!important;
		height: 30px!important;
		font-size: 12pt;
	}
</style>
